<template>
    <div class="banner" ref="view">
      <!-- 左侧模块 -->
      <div class="user" v-show="isShow" >
        <!-- 用户栏 -->
        <div class='username'>
          <div class="user_pic" @mouseout="changeShow2()" @mouseover="changeShow1()" @click="turnToAdmin" >
            <img src="@/assets/00.png" alt="" class="img1" v-show="!pic_show" >
            <img src="@/assets/11.png" alt="" class="img0" v-show="pic_show" >
          </div>
          <div class="admin">
            <span>饲养员：{{name}}</span><br>
            <span>{{centence}}</span>
          </div>
        </div>
        <!-- 文章标签栏 -->
        <div class="label">
          <span class="tag">文章分类</span>
          <ul class="sortUl">
                    <li  v-for="(s1,index) in sortList" :key="index" @click="turnToSearchSort(s1)">
                        <i class="iconfont icon-24gl-tags3"></i>{{s1}}
                    </li>
                </ul>
        </div>
        <!-- 推荐栏目 -->
        <div class="recommen">
          <span class="rec">推荐</span>
          <!-- 音乐栏目 -->
          <div class="music">
                  <span class="sp1">音乐:</span>
                  <span class="sp2">戒网</span>
                  <span class="sp3">典狱司</span>
                  <span class="sp4">不染</span>
                  <span class="sp5">无脚鸟</span>
                  <span class="sp6">Lemon</span>
                  </div>
                  <!-- 游戏栏目 -->
                  <div class="game">
                      <span class="sp7">游戏:</span>
                      <span class="sp8">CS:GO</span>
                      <span class="sp9">战地1</span>
                      <span class="sp10">巫师3</span>
                      <span class="sp11">怪物'猎'人</span>
                  </div>
                  <!-- 电影推荐 -->
                  <div class="movie">
                    <span class="sp12">电影:</span>
                    <span class="sp13">我和我的祖国</span>
                    <span class="sp14">误杀</span>
                    <span class="sp15">肖申克的救赎</span>
                    <span class="sp16">贝克街的亡灵</span>
                  </div>
          <!--  -->
        </div>
      </div>
      <!-- 文章s -->
      <div class="article">
        <ul>
          <li v-for="s in sortSearcgList" :key="s.id">
            <!-- 圈圈 -->
            <span><i class="iconfont icon-weixuanzhongyuanquan iconn"></i></span>
            <span class="title" @click="turnToArticle(s)">{{s.title}}</span>
            <div class="blogBody" @click="turnToArticle(s)">{{s.summary}}</div>
            <!-- <article class="blogBody">{{b.summary}}</article>  -->
            <span class="dibu">
              <!-- 作者 -->
              <span class="author"><i class="iconfont icon-denglu-copy"></i>小狼</span>
              <!-- 发布时间 -->
              <span class="time"><i class="iconfont icon-shizhong"></i>{{s.time}}</span>
              <!-- 分类 -->
              <span class="sort" @click="turnToSearchSort(s.sort)"><i class="iconfont icon-24gl-tags3"></i>{{s.sort}}</span>
            </span>
          </li> 
        </ul>
      </div>
      <!-- 右侧栏 -->
      <!-- <div class="rBox" v-show="isShow">
        <div class="upBox">
          <div class="list">文章目录</div>
        </div>
        <div class="downBox">
        </div>
      </div> -->
    </div>
  </template>
  
  <script>
  import {mapState} from 'vuex'
  export default {
      name:'banner',
      data(){
        return {
          isShow:true,
          name:'爱学习的小狼',
          centence:'褪去一身洒脱 不过是天涯倦客 饮尽悲欢无人与说',
          pic_show:true
        }
      },
      methods:{
        // changeShow(){
        //   let scrollTop = window.pageYOffset 
        //   if(scrollTop > 0.92 * document.documentElement.clientHeight-1 ){
        //     this.isShow = false
        //   }
        //   if(scrollTop <= 0.92 * document.documentElement.clientHeight-1){
        //     this.isShow = true
        //   }
        // },
        changeShow1(){
          this.pic_show=false
        },
        changeShow2(){
          this.pic_show = true
        },
        turnToAdmin(){
          
          this.$router.push({
            path:'/admin',
          })
        },
        // 根据id获取博客
        turnToArticle(b){
          let blog = b;
          this.$router.push({
            path:'/article',
            query:{
              blog:blog
            }
          })
        },
        turnToSearchSort(s1){
        this.$store.dispatch('searchSort',s1)
        this.$router.push({
          path:'/search'
        })
      }
      },
      mounted(){
        window.addEventListener('scroll',this.changeShow)
        this.$refs.view.width = document.documentElement.clientWidth;
      },
      computed:{
        ...mapState(['sortSearcgList','blogList','sortList']),
      }
  }
  </script>
  
  <style scoped>
    .banner {
      height: 100%;
      width: 100%;
      background-color:transparent;
      border: 1px solid white;
      border: none;
      font-family: "NLXJ-BODY";
    }
    .user {
      position: fixed;
      top: 8%;
      left: 10%;
      background-color: rgba(255,255,255,0.9);
      height: 100%;
      width: 20%;
      left: 10%;
      z-index: 99;
  }
    .username {
          position: absolute;
          left: 0;
          top: 0;
          background-color:transparent;
          height: 31%;
          width: 100%;
      }
    .label {
          position: absolute;
          left: 0;
          top: 31%;
          background-color: transparent;
          height: 30%;
          width: 100%;
          border-top: 1px gray solid;
    }
    .tag {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%);
      height: 10%;
      width: 100%;
      font-size: 15px;
      color:rgb(190, 139, 156) ;
    }
   .recommen{
    position: absolute;
    top: 61%;
    height: 31%;
    width: 100%;
    background-color: transparent;
    border-top: 1px gray solid;
    font-size: 15px;
       color:rgb(190, 139, 156)
   }
    .article {
       width: 50%;
       height: 100%;
       background-color: white;
       position: absolute;
       left: 30%;
       top: 8%; 
       font-size: 15px;
       color:black;
    }
    .user_pic {
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translate(-50%);
        background-color: transparent;
        width: 30%;
        height: 40%;
        border:1px solid gray;
        z-index: 1;
        border-radius: 49%;
        overflow: hidden;
        cursor: pointer;
    }
    .img1 {
        width:100%;
          height:100%;
          position:absolute;
          top:0;
          left:0;
    }
      .img0 {
          width:100%;
          height:100%;
          position:absolute;
          top:0;
          left:0;
          margin-top: -1px;
      }
      .admin {
        width: 100%;
        height: 30%;
        background-color: transparent;
        font-size: 15px;
        text-align: center;
        position: absolute;
        top: 60%;
        color:rgb(190, 139, 156);
        /* background-color: green; */
      }
      .admin span {
        display: inline-block;
        padding:5px;
      }
      .list {
        background-color: transparent;
        position: absolute;
        top: 5%;
        left: 0%;
        width: 100%;
        height: 10%;
        color: rgb(190, 139, 156);
        font-size: 15px;
      } 
      ul{
        background-color: white;
        width: 100%;
        font-size: 15px;
        color: black;
      }
      ul li {
        position: relative;
        left: 50%;
        transform: translate(-50%);
        height: 150px;
        width: 80%;
        background-color: transparent;
        border-bottom: 1px solid gray;
      }
      .title{
        display: inline-block;
        position: absolute;
        left: 1%;
        top: 20%;
        font-size: 20px;
        cursor: pointer;
      }
      .blogBody{
        position: absolute;
        left: 2%;
        top: 50%;
        width: 100%;
        height: 20%;
        text-align: left;
        overflow:hidden; 
        text-overflow:ellipsis;
        white-space: nowrap;
        cursor: pointer;
        word-wrap:break-word
      }
      .title:hover {
        color: rgb(26, 179, 239);
      }
      .blogBody:hover {
        color: rgb(26, 179, 239);
      }
      .dibu {
        position: absolute;
        top: 80%;
        left: 0;
        width: 100%;
        height: 20%;
        text-align: center;
        font-family: "NLXJ-BODY";
      }
      .author{
        position:absolute;
        top: 0%;
        left: 1%;
        font-family: "NLXJ-BODY";
      }
      .time{
        position:absolute;
        top: 0%;
        left: 12%;
        font-family: "NLXJ-BODY";
      }
      .sort{
        position:absolute;
        top: 0%;
        left: 27%;
        font-family: "NLXJ-BODY";
        cursor: pointer;
      }
    .iconn {
      position: absolute;
      top: 22%;
      left: -4%;
      transform: translate(-50%);
    }
    .sort:hover {
      color:rgb(26, 179, 239)
    }
    .rec {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%);
    }
    .music {
      position: relative;
      top: 20%;
      left: 0%;
      width: 100%;
      height: 20%;
  }
  .sp1 {
      position: absolute;
      top: 20%;
      left: 5%;
  }
  .sp2 {
      position: absolute;
      top: 20%;
      left: 18%;
  }
  .sp3 {
      position: absolute;
      top: 20%;
      left: 29%; 
  }
  .sp4 {
      position: absolute;
      top: 20%;
      left: 45%;
  }
  .sp5 {
      position: absolute;
      top: 20%;
      left: 56%;
  }
  .sp6 {
      position: absolute;
      top: 20%;
      left: 72%;
  }
  .sp2,.sp3,.sp4,.sp5,.sp6 {
      cursor: pointer;
  }
  .sp2:hover,.sp3:hover,.sp4:hover,.sp5:hover,.sp6:hover {
      color: rgb(26, 179, 239);
  }
  .game {
      position: absolute;
      top: 40%;
      left: 0%;
      width: 100%;
      height: 20%;
  }
  .sp7 {
      position: absolute;
      top: 20%;
      left: 5%;
  }
  .sp8 {
      position: absolute;
      top: 20%;
      left: 18%;
  }
  .sp9 {
      position: absolute;
      top: 20%;
      left: 32%; 
  }
  .sp10 {
      position: absolute;
      top: 20%;
      left: 45%;
  }
  .sp11 {
      position: absolute;
      top: 20%;
      left: 60%;
  }
  .sp8,.sp9,.sp10,.sp11 {
      cursor: pointer;
  }
  .sp8:hover,.sp9:hover,.sp10:hover,.sp11:hover {
      color: rgb(26, 179, 239);
  }
  .movie {
    position: absolute;
      top: 60%;
      left: 0%;
      width: 100%;
      height: 20%;
  }
  .sp12 {
      position: absolute;
      top: 20%;
      left: 5%;
  }
  .sp13{
      position: absolute;
      top: 20%;
      left: 17%;
  }
  .sp14 {
      position: absolute;
      top: 20%;
      left: 46%; 
  }
  .sp15 {
      position: absolute;
      top: 20%;
      left: 57%;
  }
  .sp16 {
      position: absolute;
      top: 50%;
      left: 17%;
  }
  .sp13,.sp14,.sp15,.sp16 {
      cursor: pointer;
  }
  .sp13:hover,.sp14:hover,.sp15:hover,.sp16:hover {
      color: rgb(26, 179, 239);
  }
  .label .sortUl{
  background-color: transparent;
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 85%;
  font-size: 15px;
  color: rgb(190, 139, 156);
}
.label .sortUl li{
  position: relative;
  left: 50%; 
  transform: translate(-50%);
  height: 25px;
  width: 100%;
  border-bottom: none;
  cursor: pointer;
}
.sortUl li:hover {
    color:rgb(26, 179, 239)
}
  </style>